<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body>
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">个人资料</span>
</div>
<div id="app" v-cloak class="top-container">
    <div class="row-container">
        <a class="row" style="height:74px;padding:10px;line-height:74px;" v-row-active v-myclick="setPortrait">
            <span>头像</span>
            <img style="margin-top:28px;" class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <img class="userinfo-img_header" :src="user.portrait ? user.portrait : '../../image/portrait_moren.png'">
        </a>
        <a v-open-win="{nickname:user.nickname, has_rename:user.has_rename}" vurl="username" class="row" v-row-active.tapmode>
            <span>昵称</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span>{{user.nickname}}</span>
        </a>
        <a class="row" v-myclick="[true, changeShowUserid]" v-row-active>
            <span>编号</span>
            <span>{{user.member_code}}</span>
        </a>
        <a class="row" v-myclick="encodeImg" v-row-active>
            <span>二维码</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <img class="row-icon" v-src="'../../image/userinfo_icon_qrcode.png'" style="float:right;margin-right:10px;">
        </a>
        <a class="row" v-myclick="[true, changeShowInviteCode]" v-row-active>
            <span>邀请码</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span>{{user.invite_code}}</span>
        </a>
    </div>
    <div class="row-container">
        <a class="row" v-row-active.tapmode v-open-win="{pname:user.pname,p_invite_code:user.p_invite_code}"
           vurl="superior">
            <span>推荐人</span>
            <span>{{user.pname}}</span>
        </a>

        <a class="row">
            <span>有效期</span>
            <span>{{user.duration_type == 1 && user.date_level_end ? user.date_level_end : '永久'| date2}}</span>
        </a>
    </div>
    <div class="row-container">
        <a class="row" v-myclick="openSexSelector" v-row-active>
            <span>性别</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span>{{sex}}</span>
        </a>
        <a class="row" v-myclick="openCitySelector" v-row-active>
            <span>地区</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span>{{user.province}} {{user.city}} {{user.district}}</span>
        </a>
        <a class="row" v-open-win="{prefer:user.prefer}" vurl="prefer" v-row-active.tapmode>
            <span>偏好</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span style="width:50%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align:right">{{user.prefer}}</span>
        </a>
        <a class="row" v-open-win="{remark:user.remark}" vurl="remark" v-row-active.tapmode>
            <span>备注</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span style="width:50%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align:right">{{user.remark}}</span>
        </a>
    </div>

    <div class="userinfo-modal" :class="useridModal" v-myclick.stop="[false, changeShowUserid]">
        <div class="userinfo-modal-alert" :class="useridModal">
            <img class="alert-close" v-src="'../../image/btn_close_black.png'" v-myclick="[false, changeShowUserid]">
            <p class="alert-title">我的编号</p>
            <p class="alert-msg">{{user.member_code}}</p>
            <a class="alert-btn" v-myclick="[user.member_code, copy]">复制编号</a>
        </div>
    </div>
    <div class="userinfo-modal" :class="qrcodeModal" v-myclick.stop="[false, changeShowQrcode]">
        <div class="userinfo-modal-alert" :class="qrcodeModal" style="margin-top:-170px;">
            <img class="alert-close" v-src="'../../image/btn_close_black.png'" v-myclick="[false, changeShowQrcode]">
            <p class="alert-title">我的二维码</p>
            <img :src="qrcodeImg" style="width:80%;margin-top:20px;">
        </div>
    </div>
    <div class="userinfo-modal" :class="inviteCodeModal" v-myclick.stop="[false, changeShowInviteCode]" >
        <div class="userinfo-modal-alert" :class="inviteCodeModal">
            <img class="alert-close" v-src="'../../image/btn_close_black.png'" v-myclick="[false, changeShowInviteCode]" >
            <p class="alert-title">我的邀请码</p>
            <p class="alert-msg">{{user.invite_code}}</p>
            <a class="alert-btn" v-myclick="[user.invite_code, copy]">复制邀请码</a>
        </div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>

<script>


    var clipBoard,
        UIActionSelector,
        vm,
        user,
        scanner;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        showProgress();
        scanner = api.require('FNScanner');
        clipBoard = api.require('clipBoard');
        UIActionSelector = api.require('UIActionSelector');
        getUserinfo();
        addListeners();
    };

    function getUserinfo() {
        var data = {member_id: getPrefs('member_id')};
        var callback = function (ret) {
            user = ret.content;
            initApp();
            api.parseTapmode();
            setPrefs('user', user);
            listenUpdUser(vm.user);
        };

        pinet.post(URL.getUserinfo, data, callback);
    }

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                user: user,
                qrcodeImg: '',
                showUserid: false,
                showQrcode: false,
                showInviteCode: false,
            },
            computed: {
                deposit: function () {
                    var d = Number(user.deposit);
                    return d > 0 ? '已缴纳' : '未缴纳';
                },
                sex: function () {
                    if (user.sex == '1') {
                        return '男';
                    } else if (user.sex == '2') {
                        return '女';
                    } else {
                        return '未知';
                    }
                },
                useridModal: function () {
                    return {
                        show: this.showUserid,
                        hide: !this.showUserid
                    }
                },
                qrcodeModal: function () {
                    return {
                        show: this.showQrcode,
                        hide: !this.showQrcode
                    }
                },
                inviteCodeModal: function () {
                    return {
                        show: this.showInviteCode,
                        hide: !this.showInviteCode
                    }
                }
            },
            methods: {
                setPortrait: function () {
                    api.actionSheet({
                        cancelTitle: '取消',
                        buttons: ['拍照', '从手机相册选择'],
                        style: {
                            fontNormalColor: '#000',
                            fontPressColor: '#000',
                        }
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        switch (index) {
                            case 1:
                                return vm.getPicture('camera');
                            case 2:
                                return vm.getPicture('album');
                            default:
                                break;
                        }
                    });
                },
                getPicture: function (sourceType) {
                    api.getPicture({
                        sourceType: sourceType,
                        targetWidth:600,
                        encodingType:'jpg'
                    }, function (ret) {
                        if (ret) {
                            showProgress();
                            var data = {
                                member_id: getPrefs('member_id')
                            };
                            var file = {
                                file: ret.data
                            };
                            var callback = function () {
                                vm.user.portrait = ret.data;
                                vm.user.hasPortraitUpd = true;
                                setPrefs('user', vm.user);
                            };
                            return pinet.postFiles(URL.updUserInfo, data, file, callback);
                        }
                    });
                },
                copy: function (text) {
                    clipBoard.set({
                        value: text
                    }, function (ret) {
                        if (ret) {
                            api.toast({
                                msg: '已复制到剪贴板',
                            });
                        }
                    });
                },
                openSexSelector: function () {
                    var index = this.user.sex == '2' ? 1 : 0;
                    var datas = [{"name": "男"}, {"name": "女"}];
                    var callback = function (ret) {
                        var sex = ret.eventType == 'ok' ? ret.level1 : '';
                        if (sex == '男') {
                            vm.updSex('1');
                        } else if (sex == '女') {
                            vm.updSex('2');
                        }
                    };
                    this.openUIActionSelector(datas, 1, [index], callback);
                },
                openCitySelector: function () {
                    var _datas = api.readFile({sync: true, path: 'widget://res/cities.json'});
                    var datas = JSON.parse(_datas);
                    var province_index, province, city_index, city, district_index;

                    if (this.user.province) {
                        for (var i = 0, l = datas.length; i < l; i++) {
                            if (datas[i].name == this.user.province) {
                                province = datas[i];
                                province_index = i;
                                if (this.user.city) {
                                    for (var i = 0, l = province.sub.length; i < l; i++) {
                                        if (province.sub[i].name == this.user.city) {
                                            city = province.sub[i];
                                            city_index = i;
                                            if (this.user.district) {
                                                for (var i = 0, l = city.sub.length; i < l; i++) {
                                                    if (city.sub[i].name == this.user.district) {
                                                        district_index = i;
                                                        break;
                                                    }
                                                }
                                            }
                                            break;
                                        }
                                    }
                                }
                                break;
                            }
                        }
                    }
                    province_index = province_index ? province_index : 0;
                    city_index = city_index ? city_index : 0;
                    district_index = district_index ? district_index : 0;

                    var actives = [province_index, city_index, district_index];
                    var callback = function (ret) {
                        if (ret.eventType == 'ok') {
                            vm.updCities(ret.level1, ret.level2, ret.level3);
                        }
                    };
                    this.openUIActionSelector(datas, 3, actives, callback);
                },
                updSex: function (sex) {
                    var data = {
                        member_id: getPrefs('member_id'),
                        sex: sex
                    };
                    var callback = function (ret) {
                        if (ret.errcode == 0) {
                            vm.user.sex = sex;
                        } else {
                            api.alert({
                                title: '错误',
                                msg: '修改信息失败:' + ret.message,
                                buttons: ['确定']
                            }, function () {
                            });
                        }
                    }
                    pinet.post(URL.updUserInfo, data, callback);
                },
                updCities: function (province, city, district) {
                    var data = {
                        member_id: getPrefs('member_id'),
                        province: province,
                        city: city,
                        district: district
                    };
                    var callback = function (ret) {
                        if (ret.errcode == 0) {
                            vm.user.province = province;
                            vm.user.city = city;
                            vm.user.district = district;
                        } else {
                            api.alert({
                                title: '错误',
                                msg: '修改信息失败:' + ret.message,
                                buttons: ['确定']
                            }, function (ret, err) {

                            });
                        }
                    };
                    pinet.post(URL.updUserInfo, data, callback);
                },
                openUIActionSelector: function (datas, col, actives, callback) {
                    var actives = actives ? actives : [0, 0, 0];
                    UIActionSelector.open({
                        datas: datas,
                        layout: {
                            col: col,
                            size: 20,
                            sizeActive: 22,
                            bg: '#eee',
                            colorActive: '#000',
                            colorSelected: '#000'
                        },
                        cancel: {
                            text: '',
                            bg: '#eee',
                            w:0,
                            h:0,
                            bgActive: '#eee',
                        },
                        ok: {
                            text: '完成',
                            size: 16,
                            w:70,
                            h:40,
                            bg: '#eee',
                            bgActive: '#ccc',
                            color: '#000',
                            colorActive: '#000'
                        },
                        title: {
                            text: '',
                        },
                        actives: actives
                    }, callback);
                },
                encodeImg: function () {
                    this.showQrcode = true;
                    scanner.encodeImg({
                        content: this.user.qrcode,
                        saveImg: {
                            path: 'fs://qrcode.png',
                            w:400,
                            h:400,
                        }
                    }, function (ret) {
                        if (ret.status) {
                            vm.qrcodeImg = ret.imgPath;
                        }
                    })
                },
                changeShowUserid: function (flag) {
                    this.showUserid = flag;
                },
                changeShowInviteCode: function (flag) {
                    this.showInviteCode = flag;
                },
                changeShowQrcode: function (flag) {
                    this.showQrcode = flag;
                }
            },
            watch: {
                showUserid: function (flag) {
                    this.preventTouchmove(flag);
                },
                showQrcode: function (flag) {
                    this.preventTouchmove(flag);
                },
                showInviteCode: function (flag) {
                    this.preventTouchmove(flag);
                }
            }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }
</script>
